/* 1. Main Section Container */
.team-section {
  background-color: #ffffff; 
  padding: 80px 20px;
  color: #2b422a; /* Dark forest green text for better legibility */
}

/* 2. The Grid System */
.processes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
  gap: 10px;
  max-width: 1200px;
  margin: 0 auto;
  justify-items: center;
  height: 03%;
  width: 100%;
}

.text-section{
  text-align: center;
  font-weight: 100;
}

/* 3. The Card Style */
.process-card {
  background-color: #fdfdfd; 
  border-radius: 12px;
  padding: 35px;
  /* Subtle border using a light version of the logo green */
  border: 1px solid #e1ebe0; 
  
  width: 100%;
  max-width: 380px; 
  min-height: 200px; 
  
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.process-card:hover {
  transform: translateY(-8px);
  background-color: #ffffff;
  /* Shadow uses a tint of green to stay on-brand */
  box-shadow: 0 15px 30px rgba(46, 108, 44, 0.1);
  border-color: #3e7b37; /* Forest green from logo.png */
}

/* 4. Icon Styling - Using the primary green from logo.png */
.process-icon {
  background-color: #3e7b37; /* Forest Green from ZEC logo */
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  margin-bottom: 24px;
  flex-shrink: 0;
}

.process-icon svg {
  width: 26px;
  height: 26px;
  color: white; /* Clean white icon inside the green box */
}

/* 5. Typography */
.process-card h3 {
  font-size: 1.25rem;
  margin-bottom: 12px;
  font-weight: 700;
  color: #2b422a; /* Deep forest green */
}

.process-card p {
  color: black; /* Muted olive-green for secondary text */
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 0px;
}

/* 6. Details & Link Logic */
summary {
  list-style: none;
  cursor: pointer;
  outline: none;
}

summary::-webkit-details-marker {
  display: none;
}

/* Link uses the red accent from "Zero e-waste" text in logo.png */
.process-link {
  margin-top: auto;
  color: #a63232; /* Brick Red from logo.png */
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: underline;
  display: inline-block;
  cursor: pointer;
}

.details-content {
  padding: 15px;
  background: #f4f8f4; /* Very soft green tint */
  border-radius: 8px;
  margin-top: 20px;
  border-left: 4px solid #3e7b37; /* Green border accent */
  animation: slideDown 0.3s ease-out;
}

.details-content h4 {
  color: #3e7b37;
  font-size: 0.9rem;
  margin-bottom: 8px;
  text-transform: uppercase;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}